<template>
  <div class="div-container">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide border-box-outer" v-for="(item,index) in radarRealData" :key="index"  @click="changeSiloId(item)">
                    <!-- <div class="border-box-outer"  v-for="(item,index) in radarRealData" :key="index"  @click="changeSiloId(item)"> -->
                    <div class="border-box-per">
                        <div class="inner-box-color" :style="{height:item.perLevel+'%'}"></div>
                        <div class="border-solid" :style="{bottom:'80%'}"></div>
                        <!-- <h style="color:red"/> -->
                    </div>
                    <el-tooltip effect="dark" :content="item.siloStockName" placement="top">
                        <div class="border-font-box">{{ item.siloStockName }}</div>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>



  </div>
</template>

<script>

import "swiper/css/swiper.css";
import Swiper from 'swiper';

export default {
    props:['radarRealData'],
    data(){
        return{
            mySwiper:undefined
        }
    },
    // watch: {
    //     radarRealData:{
    //         // deep:true,
    //         handler(val){
    //         // this.siloData.siloMin = val.siloMin;
    //         // this.siloData.siloMax = val.siloMax;
    //         // this.siloData.siloMean = val.siloMean;
    //         // this.siloData.siloPer = val.siloPer;
    //         // this.siloData.siloVol = val.siloVol;
    //         // this.siloData.siloWei = (Number(val.siloVol)*Number(val.siloDensity)).toFixed(4);
    //         // this.getData();
    //         }   
    //     }
    // },
    mounted(){
        // console.log(this.radarRealData)
        this.initSwiper();
    },
    methods:{
        initSwiper(){
            this.mySwiper = new Swiper('.swiper-container', {
            autoplay: true,//可选选项，自动滑动
            // speed: 2000,//可选选项，滑动速度
            // loop: true,
            navigation: {
                nextEl: '.swiper-button-next', 
                prevEl: '.swiper-button-prev',
            },
            // slidesPerView: 5,
            slidesPerView: 'auto',
            // direction: 'vertical',
            // slide:5,
          });
        },
        changeSiloId(item){
            this.$bus.$emit("bottomContainer",item.stockId)
        }

    }
}
</script>

<style lang="scss" scoped>
.div-container{
    height: 100%;
    white-space: nowrap;
    // width:100%;
    // overflow-x: auto;
}
.swiper-container{
    height: 100%;
}
.swiper-wrapper{
    height: 100%;
}
.border-font-box{
    color:#fff;
    height: 20px;
    width:100%;
    text-align: center;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.border-box-outer{
    float: left;
    display: inline;
    width: 100px !important;
    height: 100%;
    font-size: 16px;
    margin-left:20px;
    /* margin-left:6.25%;
    margin-top: 10px; */
    color:#fff;
}
.border-box-per{
    position: relative;
    // border: 1px solid #000000;
    border: 1px solid #fff;
    width: 100%;
    border-radius: 2px;
    /* margin-left:25%; */
    height: calc(100% - 20px);
    cursor:pointer;
    display:flex; 
    flex-direction:column;
}
// .border-solid{
//     position: absolute;
//     border-top: 2px solid #f60804;
//     width: 100%;
//     z-index: 2;
//     /* bottom: 80%; */
// }
.inner-box-color{
    position: relative;
    width:100%;
    margin-top: auto;
    height: 0%;
    // background: linear-gradient(to top, blue, #ffffff)
    background:linear-gradient(to top, blue, white)
}
</style>